<template>
  <div>
    <!--右上角关闭图标-->
    <div style="display: flex;justify-content: right;margin:10px;margin-right: 20px; " @click="closeDetail">
      <i class="el-icon-close" style=" cursor: pointer"></i>
    </div>

    <div class="daKuang" style="margin-top: 10px">
      <div style="margin-bottom: 20px">
        <div style="margin-left: 20px; margin-top: 20px; display: flex; align-items: center">
          <!-- 左侧内容 -->
          <el-tag style="margin-right: 30px" effect="plain">订单基本信息</el-tag>
          <span class="spanText">订单编号:{{ orderDetail.serial }}</span>
          <span class="spanText">下单时间: {{ formatTime(orderDetail.time) }}</span>
          <span class="spanTextEnd">下单类型: {{ orderType(orderDetail.type) }}</span>
          <!--          <dict-tag :options="dict.type.order_type" :value="orderDetail.type" style="padding: 1px" type="success"/>-->
          <span class="spanTextEnd" style="margin-left: 10px">订单状态: {{ orderState(orderDetail.state) }}</span>
          <!--          <dict-tag :options="dict.type.order_status" :value="orderDetail.state" style="padding: 1px;" class="share"-->
          <!--                    :class="getTagClass(orderDetail.state)"/>-->
          <span class="spanTextEnd" style="margin-left: 10px">超时次数: {{ orderDetail.rovercount }}</span>
          <!-- 右侧标签部分 -->
          <div style="flex-grow: 1; display: flex; justify-content: flex-end; margin-right: 40px">
            <el-tag
              :title="label.node"
              style="margin: 1px;"
              v-for="label in orderDetail.labels"
              :key="label.name"
              size="mini"
            >
              {{ label.name }}
            </el-tag>
          </div>
        </div>


        <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column
              prop="telNumber"
              label="订单号码"
              width="220">
              <template #default="{row}">
                {{ row.telNumber }}
                <el-tag style="cursor: pointer"
                        v-if="(row.telNumber !== null && row.telNumber !== undefined && row.telNumber !== '') && row.isActivation == 1"
                        size="mini" @click="telNumberChange(false)" type="success">修改号码
                </el-tag>
                <el-tag style="cursor: pointer"
                        v-else-if="(row.telNumber == null || row.telNumber == undefined || row.telNumber == '') && row.isActivation == 1"
                        size="mini" @click="telNumberChange(true)" type="success">选择号码
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="orderPrice"
              label="订单价格"
              width="110">
              <el-input
                :disabled="orderDetail.type == 1 || orderDetail.type == 3 || orderDetail.type == 4|| orderDetail.type == 5 || orderDetail.type == 6"
                type="number" v-model="orderDetail.orderPrice"></el-input>
            </el-table-column>

            <el-table-column
              prop="settlementPrice"
              label="结算价"
              width="110">
              <el-input type="number" v-model="orderDetail.settlementPrice"></el-input>
            </el-table-column>

            <el-table-column
              prop="uploadFloorPrice"
              label="上传底价"
              width="110">
              <el-input type="number" v-model="orderDetail.uploadFloorPrice"></el-input>
            </el-table-column>

            <el-table-column
              prop="businessProfit"
              label="商户利润"
              width="110">
            </el-table-column>

            <el-table-column
              prop="platformProfit"
              label="平台利润"
              width="110">
            </el-table-column>

            <el-table-column
              prop="baoZhangPrice"
              label="报账金额"
              width="110">
              <template #default="{row}">
                <span style="color:#00afff"> {{ row.baoZhangPrice }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="baoZhangManageName"
              label="报账人"
              width="110">
              <template #default="{row}">
                <span style="color:#00afff"> {{ row.baoZhangManageName }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="receiveOrderUserName"
              label="跟单人"
              width="220">
              <template #default="{row}">
                {{ row.receiveOrderUserName }}
                <el-tag style="cursor: pointer"
                        v-if="(row.receiveOrderUserName !== null && row.receiveOrderUserName !== undefined && row.receiveOrderUserName !== '') && row.isActivation == 1"
                        size="mini" @click="receiveOrderUserNameChange" type="success">修改跟单人
                </el-tag>
                <el-tag style="cursor: pointer"
                        v-else-if="(row.receiveOrderUserName == null || row.receiveOrderUserName == undefined || row.receiveOrderUserName == '') && row.isActivation == 1"
                        size="mini" @click="receiveOrderUserNameChange" type="success">选择跟单人
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="maintainManageId"
              label="维系人"
            >
            </el-table-column>

            <el-table-column
              v-if="orderDetail.type != 1 && orderDetail.type != 6 && orderDetail.type != 7 && orderDetail.type != 8 && orderDetail.type != 100"
              label="操作">
              <el-button @click="gaiJia" type="primary" size="mini">
                改价
              </el-button>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="orderDetail.state == 6 && orderDetail.commissionpriceType == 2"
             style="width: 97%; display: flex; justify-content: center; margin:20px;">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column
              prop="telNumber"
              label="后返比例">
              <template #default="{row}">
                {{ row.commissionpriceArrList.join(",  ") }}
              </template>
            </el-table-column>

            <el-table-column
              prop="commissionAccumulate"
              label="累计出佣"
              width="200">
            </el-table-column>

            <el-table-column
              prop="commissionRecent"
              label="近期出佣"
              width="200">
            </el-table-column>

            <el-table-column
              prop="commissionPolicyName"
              label="政策名称"
              width="200">
            </el-table-column>
          </el-table>
        </div>


        <div v-if="orderDetail.state == 6 && orderDetail.commissionpriceType == 1"
             style="width: 97%; display: flex; justify-content: center; margin:20px;">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column
              prop="commissionprice"
              label="即返佣金"
            >
            </el-table-column>
          </el-table>
        </div>


        <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column
              prop="price"
              label="统一售价"
              width="110">
            </el-table-column>

            <el-table-column
              prop="bill"
              label="所含话费"
              width="110">
            </el-table-column>

            <el-table-column
              prop="addTelTime"
              label="号码添加时间"
              width="220">
              <template #default="{row}">
              <span>
                {{ formatTime(row.addTelTime) }}
              </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="supplierName"
              label="号码仓">
              <template #default="{row}">
                <span style="color: #00afff">
                   {{ row.supplierName }}
                </span>
                <el-tag style="cursor: pointer" size="mini" @click="" type="success">修改</el-tag>
              </template>


              <template #default="{row}">
                {{ row.supplierName }}
                <el-tag style="cursor: pointer"
                        v-if="(row.supplierName !== null && row.supplierName !== undefined && row.supplierName !== '') && row.isActivation == 1"
                        size="mini" @click="supplierNameChange" type="success">修改号码仓
                </el-tag>
                <el-tag style="cursor: pointer"
                        v-else-if="(row.supplierName == null || row.supplierName == undefined || row.supplierName == '') && row.isActivation == 1"
                        size="mini" @click="supplierNameChange" type="success">修改号码仓
                </el-tag>
              </template>

            </el-table-column>

            <el-table-column
              prop="guiShudi"
              label="归属地"
              width="110">
            </el-table-column>

            <el-table-column
              prop="className"
              label="运营商"
              width="110">
              <template #default="{row}">
                {{ getClassName(row.className) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="segmentName"
              label="规律段"
              width="220"
            >
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
          <el-table :data="[computedOrderDetail]" border>
            <el-table-column
              prop="content"
              label="号码说明">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-if="orderDetail.isActivation == 2"
           style="width: 97%; display: flex; justify-content: center; margin:20px;">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="activationTime"
            label="激活时间">
            <template #default="{row}">
              {{ formatTime(row.activationTime) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="identificationNumber"
            label="用户标识号">
            <template #default="{row}">
              <div style="display: flex;align-items: center">
                <el-input type="number" v-model="orderDetail.identificationNumber"
                          style="width: 60%;margin-right: 10px"></el-input>
                <el-tag style="cursor: pointer" size="mini" @click="updateIdentityNumber"
                        type="success">修改用户标识号
                </el-tag>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="firstChargePrice"
            label="首充金额">
            <template #default="{row}">
              <div style="display: flex;align-items: center">
                <el-input type="number" v-model="orderDetail.firstChargePrice"
                          style="width: 60%;margin-right: 10px"></el-input>
                <el-tag style="cursor: pointer" size="mini" @click="updateFirstChargePrice"
                        type="success">修改首充金额
                </el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <div class="daKuang" v-if="orderDetail.type == 1 || orderDetail.type == 3 ||orderDetail.type == 4">
      <div style="margin-left: 20px;margin-top: 20px;display: flex;align-items: center">
        <el-tag style="margin-right: 30px" effect="plain">支付信息</el-tag>
      </div>

      <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="payType"
            label="支付方式"
          >
            <template #default="{row}">
              <el-tag type="success"> {{ row.payType }}</el-tag>
            </template>

          </el-table-column>
          <el-table-column
            prop="orderNo"
            label="支付单号"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="支付金额"
          >
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>


    <div class="daKuang" v-if="orderDetail.type == 5|| orderDetail.type == 6">
      <div style="margin-left: 20px;margin-top: 20px;display: flex;align-items: center">
        <el-tag style="margin-right: 30px" effect="plain">抖店订单信息</el-tag>
      </div>

      <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="doudianOrderId"
            label="抖店编号"
            width="180">
          </el-table-column>

          <el-table-column
            prop="doudianOrderStatus"
            label="抖店状态"
            width="130">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.dou_dian_status" :value="scope.row.doudianOrderStatus"></dict-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="doudianOrderManageAuthorName"
            label="带货达人/ID"
            width="390">

            <template #default="{row}">
              {{ row.doudianOrderManageAuthorName }}
              <el-tag style="cursor: pointer"
                      v-if="(row.doudianOrderManageAuthorName !== null && row.doudianOrderManageAuthorName !== undefined && row.doudianOrderManageAuthorName !== '') && row.state != 6"
                      size="mini" @click="doudianOrderManageAuthorNameChange" type="success">修改带货达人
              </el-tag>
              <el-tag style="cursor: pointer"
                      v-else-if="(row.doudianOrderManageAuthorName == null || row.doudianOrderManageAuthorName == undefined || row.doudianOrderManageAuthorName == '') && row.state != 6"
                      size="mini" @click="doudianOrderManageAuthorNameChange" type="success">选择带货达人
              </el-tag>
            </template>

          </el-table-column>

          <el-table-column
            prop="doudianOrderUserTagUi"
            label="用户特征标签"
            width="260">
            <template slot-scope="scope">
              <el-tag size="mini" :title="item.text_msg" style="margin:1px;"
                      v-for="item in scope.row.doudianOrderUserTagList"
                      :key="item.text">{{ item.text }}
              </el-tag>
            </template>

          </el-table-column>

          <el-table-column
            prop="doudianOrderPayAmount"
            label="支付金额"
            width="130">
          </el-table-column>

          <el-table-column
            prop="doudianOrderPayTime"
            label="支付时间"
            width="180">
            <template #default="{row}">
              {{ formatTime(row.doudianOrderPayTime) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="doudianOrderSubBTypeDesc"
            label="下单场景描述"
          >
          </el-table-column>
        </el-table>
      </div>

      <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column width="500px"
                           prop="doudianOrderSpec"
                           label="规格信息">
            <template #default="{ row }">
              <div>
                <span v-for="(item, index) in row.doudianOrderSpecList" :key="item.name">
                  {{ item.name }} : {{ item.value }}
                  <br v-if="index < row.doudianOrderSpecList.length - 1">
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="doudianOrderProductId"
            label="商品ID"
          >
          </el-table-column>
          <el-table-column
            prop="doudianOrderShopName"
            label="店铺信息">
            <template #default="{row}">
              <div v-html="row.doudianOrderShopName"></div>
            </template>
          </el-table-column>

          <!-- 证件号码列 -->
          <el-table-column prop="customNumber">
            <template #header>
              <span>证件号码</span>
              <el-tag type="success" plain size="mini" style="margin-left: 8px">
                {{ orderDetail.customNumberAge }}
              </el-tag>
            </template>
            <template #default="{ row }">
              <div class="copy-cell">
                <span>{{ row.customNumber }}</span>
                <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customNumber)"/>
                <i v-if="row.customNumber" class="el-icon-view other-icon" @click="getIdentityVisible(row)"/>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="customTel"
            label="联系电话">
            <template #header>
              联系电话
            </template>
            <template #default="{row}">
              <div class="copy-cell">
                <span>{{ row.customTel }}</span>
                <i v-hover-show class="el-icon-document-copy copy-icon" @click.stop="copyText(row.customTel)"/>
                <i v-if="row.customTel" class="el-icon-view other-icon" @click="getPhoneVisible(row)"/>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div style="width: 97%; display: flex; justify-content: center; margin:20px;">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="doudianOrderBuyerWords"
            label="买家留言">
          </el-table-column>
        </el-table>
      </div>

    </div>
    <div class="daKuang">
      <div style="margin-left: 20px;margin-top: 20px;display: flex;align-items: center">
        <el-tag style="margin-right: 30px" effect="plain">配送信息</el-tag>
      </div>

      <div style="width: 97%; display: flex; justify-content: center; margin:20px">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="shengId"
            label="省"
            width="130">
          </el-table-column>

          <el-table-column
            prop="cityId"
            label="市"
            width="130">
          </el-table-column>

          <el-table-column
            prop="areaId"
            label="区"
            width="130">

          </el-table-column>

          <el-table-column
            prop="streetId"
            label="镇/街道"
            width="180">
          </el-table-column>

          <el-table-column
            prop="realAddress"
            label="详细地址"
            width="390">
          </el-table-column>

          <el-table-column
            prop="contactName"
            label="联系姓名"
            width="130">
          </el-table-column>

          <el-table-column
            prop="contactTel"
            label="联系电话"
          >
          </el-table-column>

          <el-table-column
            prop="userTel"
            label="会员ID"
          >
          </el-table-column>
        </el-table>
      </div>

    </div>
    <div class="daKuang" style="margin-bottom: 120px">
      <div style="margin-left: 20px;margin-top: 20px;display: flex;align-items: center">
        <el-tag effect="plain">分销商户信息</el-tag>
      </div>
      <div style="width: 97%; display: flex; justify-content: center; margin:20px">
        <el-table :data="[computedOrderDetail]" border>
          <el-table-column
            prop="img"
            label="头像">
          </el-table-column>

          <el-table-column
            prop="businessName"
            label="商家名称"
          >
          </el-table-column>

          <el-table-column
            prop="businessTel"
            label="商家电话"
          >
          </el-table-column>

          <el-table-column
            prop="businessAddress"
            label="商家地址"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>


    <el-dialog title="修改电话号码" :visible.sync="form_telNumberVisible" width="20%">
      <el-form :model="from_telNumber" :rules="telNumberRules" ref="from_telNumber"
               @submit.native.prevent="enterSubmit">
        <el-form-item prop="telNumber">
          <el-input v-model.number="from_telNumber.telNumber" placeholder="请输入11数电话号码" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_telNumberVisible = false">取 消</el-button>
        <el-button type="primary" @click="formTelNumberVisibleConfirm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改号码仓" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item>
          <el-select v-model="form.supplierId" filterable collapse-tags placeholder="请选择号码仓" clearable
                     style="width: 460px">
            <el-option v-for="item in supplierList" :key="item.id" :label="item.title" :value="item.id"/>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改跟单人" :visible.sync="form_receiveVisible" width="40%">
      <el-form :model="form_receive" :rules="form_receive_rules" ref="form_receive">
        <el-form-item prop="receiveOrderUserId">
          <el-select v-model="form_receive.receiveOrderUserId" filterable collapse-tags placeholder="请选择跟单人"
                     clearable
                     style="width: 460px">
            <el-option v-for="item in receiveOrderUserList" :key="item.userId" :label="item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-form-item>

        <el-form-item style="width: 460px" prop="content">
          <el-input type="textarea" v-model="form_receive.content" placeholder="添加备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_receiveVisible = false">取 消</el-button>
        <el-button type="primary" @click="formReceiveConfirm('form_receive')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改带货主播" :visible.sync="form_sysUserListByGroupId16Visible" width="40%">
      <el-form :model="form_userListGroupBy16">
        <el-form-item>
          <el-select v-model="form_userListGroupBy16.doudianOrderManageAuthorId" collapse-tags
                     placeholder="请选择带货主播" clearable filterable style="width: 460px">
            <el-option v-for="item in sysUserListByGroup16" :key="item.userId" :label="item.nickName"
                       :value="item.userId"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_sysUserListByGroupId16Visible = false">取 消</el-button>
        <el-button type="primary" @click="form_userListGroupBy16Confirm">确 定</el-button>
      </div>
    </el-dialog>
    <order_follow :rowId="orderDetail.id"></order_follow>

    <div class="fixed-bottom">
      <el-button size="small" v-if="orderDetail.isActivation == 2 && orderDetail.state != 6" type="success"
                 @click="businessSuccessClick()">
        竣工存档
      </el-button>
      <el-button size="small" type="success" @click="orderFollow()">订单跟进</el-button>
    </div>


    <el-dialog title="交易成功" :visible.sync="form_businessSuccessVisible" width="40%">
      <el-form :model="form_businessSuccess" label-width="170px" :label-position="labelPosition">
        <el-form-item label="给佣类型">

          <el-radio-group v-model="form_businessSuccess.commissionpriceType">
            <el-radio :label="1">即返佣金</el-radio>
            <el-radio :label="2">后返佣金</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="[68]胡权给佣比例%" v-show="form_businessSuccess.commissionpriceType == 2">
          <el-input type="number" v-model="form_businessSuccess.fuQuan" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="[7]抖音周健给佣比例%" v-show="form_businessSuccess.commissionpriceType == 2">
          <el-input type="number" v-model="form_businessSuccess.zhouJian"
                    style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="[167]抖音李洪给佣比例%" v-show="form_businessSuccess.commissionpriceType == 2">
          <el-input type="number" v-model="form_businessSuccess.liHong" style="width: 400px"></el-input>
        </el-form-item>


        <el-form-item label="给佣金额" v-show="form_businessSuccess.commissionpriceType != 2">
          <el-input type="number" v-model="form_businessSuccess.commissionprice"
                    placeholder="请输入给佣金额" style="width: 400px"></el-input>
        </el-form-item>

        <el-form-item label="已完工备注">
          <el-input style="width: 400px" type="textarea" v-model="form_businessSuccess.content"
                    placeholder="请输入已完工备注"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form_businessSuccessVisible = false">取 消</el-button>
        <el-button type="primary" @click="form_businessSuccessConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getIdentityVisible,
  getOrderDetailById,
  getPhoneVisible,
  updateByTelNumber,
  updateDouDianOrderManageAuthorId,
  updateFirstChargePrice,
  updateGaiJia,
  updateIdentityNumber,
  updateOrderTelAndForce,
  updateReceiveOrderUserId,
  updateState6,
  updateSupplier
} from "@/api/hmk/order"
import moment from "moment/moment";
import {selectRxTelByTel} from "@/api/hmk/tel"
import Order_follow from "@/views/hmk/order/order_follow.vue";
import {enterSubmit, getClassName, orderState, orderType} from "@/utils/hjf-common";
import {getOrderFollowById} from "@/api/hmk/follow";

export default {
  components: {Order_follow},
  dicts: ['order_status', 'dou_dian_status', 'order_label_type', 'order_type', 'order_is_activation', 'order_doudian_status'],
  created() {
    var id = this.$route.query.id; // 将 JSON 字符串解析为对象
    if (!id) {
      id = this.orderDetail.id;
    }
    this.supplierList = JSON.parse(sessionStorage.getItem('supplierList')); // 将 JSON 字符串解析为对象
    getOrderDetailById(id).then(res => {
      this.orderDetail = res.data;
    })
  },
  mounted() {
  },
  computed: {
    computedOrderDetail() {
      return {
        ...this.orderDetail,
        businessProfit: parseFloat(this.orderDetail.orderPrice - this.orderDetail.settlementPrice).toFixed(2),
        platformProfit: parseFloat(this.orderDetail.settlementPrice - this.orderDetail.uploadFloorPrice).toFixed(2),
        guiShudi: (this.orderDetail.shengName || '') + " " + (this.orderDetail.cityName || ''),
        doudianOrderManageAuthorName: (this.orderDetail.doudianOrderManageAuthorName || '') + "/" + (this.orderDetail.doudianOrderAuthorId || ''),
        doudianOrderShopName: this.orderDetail.doudianOrderShopId + "<br>" + this.orderDetail.doudianOrderShopName,
        doudianOrderBuyerWords: (this.orderDetail.doudianOrderBuyerWords || '--'),
        content: this.orderDetail.content || '--',
        shouHuoDiZhi: (this.orderDetail.shengId || '') + (this.orderDetail.cityId || '') + (this.orderDetail.areaId || '') + (this.orderDetail.streetId || '') + (this.orderDetail.realAddress || '')
      }
    },
  },
  watch: {
    'form_businessSuccess.commissionpriceType'(newVal) {
      if (newVal == 2) {
        this.form_businessSuccess.fuQuan = 15;
        this.form_businessSuccess.zhouJian = 15;
        this.form_businessSuccess.liHong = 20;
        this.form_businessSuccess.content = null;
      }
    },
    '$store.state.orderFollow.orderDetailFlushTag'(newVal) {
      if (newVal) {
        this.$store.commit('SET_ORDER_DETAIL_FLUSH_TAG_FALSE');
        getOrderDetailById(this.orderDetail.id).then(res => {
          this.orderDetail = res.data;
        })
      }
    },

  },
  methods: {

    businessSuccessClick() {
      this.form_businessSuccessVisible = true;
      this.form_businessSuccess.commissionprice = null;
      this.form_businessSuccess.commissionpriceType = 1;
      this.form_businessSuccess.content = null;
    },

    async form_businessSuccessConfirm() {
      let query = {id: this.orderDetail.id, commissionpriceType: this.form_businessSuccess.commissionpriceType};
      if (this.form_businessSuccess.commissionpriceType == 1) {
        if (this.form_businessSuccess.commissionprice == null || this.form_businessSuccess.commissionprice == '' || this.form_businessSuccess.commissionprice < 0) {
          this.$modal.msgError("即返佣金必填且大于或等于0")
          return;
        } else {
          query.commissionprice = this.form_businessSuccess.commissionprice;
        }
      }

      // console.log(this.form_businessSuccess)
      if (this.form_businessSuccess.commissionpriceType == 2) {
        if ((this.form_businessSuccess.fuQuan == null || this.form_businessSuccess.fuQuan == '') &&
          (this.form_businessSuccess.zhouJian == null || this.form_businessSuccess.zhouJian == '') &&
          (this.form_businessSuccess.liHong == null || this.form_businessSuccess.liHong == '')) {
          this.$modal.msgError("后返佣金值必填一个且大于0")
          return;
        }
      }

      if (this.form_businessSuccess.commissionpriceType == 2) {
        if (this.form_businessSuccess.fuQuan != '' && this.form_businessSuccess.fuQuan <= 0) {
          this.$modal.msgError("后返佣金额胡权必填一个且大于0")
          return;
        }
        if (this.form_businessSuccess.zhouJian != '' && this.form_businessSuccess.zhouJian <= 0) {
          this.$modal.msgError("后返佣金额周健必填一个且大于0")
          return;
        }
        if (this.form_businessSuccess.liHong != '' && this.form_businessSuccess.liHong <= 0) {
          this.$modal.msgError("后返佣金额李洪必填一个且大于0")
          return;
        }
      }
      query.commissionPriceArr = [];
      let sum = 0;
      if (this.form_businessSuccess.commissionpriceType == 2) {
        if (this.form_businessSuccess.fuQuan > 0) {
          sum = Number(sum) + Number(this.form_businessSuccess.fuQuan);
          query.commissionPriceArr.push({
            'id': 68,
            'name': '【68】胡权',
            'lv': this.form_businessSuccess.fuQuan
          })
        }
        if (this.form_businessSuccess.zhouJian > 0) {
          sum = Number(sum) + Number(this.form_businessSuccess.zhouJian);
          query.commissionPriceArr.push({
            'id': 7,
            'name': '【7】抖音周健',
            'lv': this.form_businessSuccess.zhouJian
          })
        }
        if (this.form_businessSuccess.liHong > 0) {
          sum = Number(sum) + Number(this.form_businessSuccess.liHong);
          query.commissionPriceArr.push({
            'id': 167,
            'name': '【167】抖音李洪',
            'lv': this.form_businessSuccess.liHong
          })
        }
        if (sum > 60) {
          this.$modal.msgError("后返佣金额总值不能大于60%")
          return;
        }
      }

      // if (this.form_businessSuccess.content == null) {
      //   this.$modal.msgError("已完工备注必填")
      //   return;
      // }
      query.content = this.form_businessSuccess.content;

      await updateState6(query);
      this.$modal.msgSuccess("获取成功")
      const res = await getOrderDetailById(this.orderDetail.id);
      this.orderDetail = res.data;
      this.form_businessSuccessVisible = false;
    },
    async getIdentityVisible(row) {
      const query = {id: row.id};
      const res = await getIdentityVisible(query);
      this.orderDetail.customNumber = res.data.customNumber;
      this.$modal.msgSuccess("获取成功")
      const res2 = await getOrderFollowById({id: row.id});
      this.orderFollowTimeList = res2.data;
    },
    async getPhoneVisible(row) {
      const query = {id: row.id};
      const res = await getPhoneVisible(query);
      this.orderDetail.customTel = res.data.customTel;
      this.$modal.msgSuccess("获取成功")
      const res2 = await getOrderFollowById({id: row.id});
      this.orderFollowTimeList = res2.data;
    },
    copyText(text) {
      // 1. 检查 text 是否为 null/undefined/空字符串
      if (!text) {
        return; // 直接返回，避免后续报错
      }
      // 2. 移除所有空格和 <br> 标签，只保留数字
      const cleanedText = String(text)
        // 第一步：先删除数字之间的空格（保留非数字之间的空格，比如 <br> 转换后的空格）
        .replace(/(\d)\s+(\d)/g, '$1$2')
        // 第二步：将 <br> 替换为空格
        .replace(/<br>/g, ' ')
        // 第三步：合并连续空格并去除首尾空格
        .replace(/\s+/g, ' ')
        .trim();
      // 3. 后续复制逻辑...
      const textarea = document.createElement('textarea');
      textarea.value = cleanedText;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      this.$message.success('复制成功：' + cleanedText);
    },
    getClassName,
    orderState,
    orderType,
    closeDetail() {
      this.$router.push({path: "/order/order"});
    },
    enterSubmit,
    handleConfirm() {
      const query = {
        suppliername: this.form.supplierId,
        id: this.orderDetail.id
      }
      updateSupplier(query).then(res => {
        getOrderDetailById(this.orderDetail.id).then(res => {
          this.orderDetail = res.data;
        })
      })
      this.dialogFormVisible = false;
    },

    receiveOrderUserNameChange() {
      this.receiveOrderUserList = JSON.parse(sessionStorage.getItem('receiveOrderUserList'));
      this.form_receive.receiveOrderUserId = null;
      this.form_receive.content = '';
      this.form_receiveVisible = true;
    },
    async formReceiveConfirm(from) {
      const valid = await this.$refs[from].validate();
      if (!valid) {
        return false;
      }
      //console.log("最新的formReceiveConfirm",this.form);
      const query = {
        receiveOrderUserId: this.form_receive.receiveOrderUserId,
        id: this.orderDetail.id,
        content: this.form_receive.content,
      }
      //console.log(JSON.stringify(query))
      updateReceiveOrderUserId(query).then(res => {
        getOrderDetailById(this.orderDetail.id).then(res => {
          this.orderDetail = res.data;
          this.$modal.msgSuccess("修改成功");
        })
      })
      this.form_receiveVisible = false;
    },
    form_userListGroupBy16Confirm() {
      const query = {
        doudianOrderManageAuthorId: this.form_userListGroupBy16.doudianOrderManageAuthorId,
        id: this.orderDetail.id
      }
      updateDouDianOrderManageAuthorId(query).then(res => {
        getOrderDetailById(this.orderDetail.id).then(res => {
          this.orderDetail = res.data;
          this.$modal.msgSuccess("提交成功");
        })
      })
      this.form_sysUserListByGroupId16Visible = false;
    },
    doudianOrderManageAuthorNameChange() {
      this.sysUserListByGroup16 = JSON.parse(sessionStorage.getItem("sysUserListByGroupId16"));
      this.form_userListGroupBy16.doudianOrderManageAuthorId = null;
      this.form_sysUserListByGroupId16Visible = true;
    },
    telNumberChange(value) {
      this.telIsNullTag = value;
      this.form_telNumberVisible = true;
    },
    formTelNumberVisibleConfirm() {
      this.$refs.from_telNumber.validate(valid => {
        if (valid) {
          const query = {
            telnumber: this.from_telNumber.telNumber,
            id: this.orderDetail.id
          }
          selectRxTelByTel(this.from_telNumber.telNumber).then(res => {
            if (res.data == null) {
              this.$confirm('上架号码中无此号,是否直接写入该订单号码?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                //号码库没有查到但强行添加该号码
                const queryData = {
                  'telnumber': this.from_telNumber.telNumber,
                  'id': this.orderDetail.id
                }
                updateOrderTelAndForce(queryData).then(res => {
                  getOrderDetailById(this.orderDetail.id).then(res => {
                    this.orderDetail = res.data;
                    this.$modal.msgSuccess("提交成功!")
                  })
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });

            } else {
              updateByTelNumber(query).then(res => {
                getOrderDetailById(this.orderDetail.id).then(res => {
                  this.orderDetail = res.data;
                  this.$modal.msgSuccess("提交成功!")
                })
              }).catch(error => {
                //  this.$modal.msgError("修改电话号码报错",error);
              })
            }
          })
          this.form_telNumberVisible = false; // 关闭对话框
        }
      })
    },
    orderFollow() {
      this.$store.commit('SET_orderFollowVisible');
    },
    getTagClass(state) {
      // 根据状态返回对应的 class
      switch (state) {
        case '1':
          return 'daiFuKuan'; // 待付款
        case '2':
          return 'weiChuLi'; // 未处理
        case '3':
          return 'chuLiZhong';  // 处理中
        case '4':
          return 'daiJunGong'; // 待竣工
        case '5':
          return 'yiShiMing'; // 已实名
        case '6':
          return 'yiWanCheng';  // 已完成
        case '7':
          return 'yiQiDan'; // 已弃单
        case '8':
          return 'yiQuXiao'; // 已取消
        case '9':
          return 'yiChaoShi';  // 已超时
        case '100':
          return 'yiFeiQi'; // 已废弃
      }
    },
    //号码规格
    haoMaGuiGe() {
      this.haoMaGuiGeStr = '';
      this.orderDetail.doudianOrderSpecList.forEach(item => {
        this.haoMaGuiGeStr = this.haoMaGuiGeStr + item.name + " : " + item.value + "\n"
      })
    },
    supplierNameChange() {
      this.dialogFormVisible = true;
      // 检查 supplierId 是否在 supplierList 中
      const found = this.supplierList.some(item => item.id == this.orderDetail.supplierId);
      if (found) {
        this.form.supplierId = Number(this.orderDetail.supplierId);
      } else {
      }
    },

    //修改用户标识号
    async updateIdentityNumber() {
      const tag = await this.$confirm('将修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({type: 'info', message: '已取消'});
      });
      if (tag) {
        this.$message({type: 'success', message: '提交成功!'});
        if (!this.orderDetail.identificationNumber || this.orderDetail.identificationNumber.length != 16) {
          return this.$modal.msgError("标识号不能为空且长度是16位!")
        }
        const query = {
          identificationNumber: this.orderDetail.identificationNumber,
          id: this.orderDetail.id
        }
        await updateIdentityNumber(query);
        const res = await getOrderDetailById(this.orderDetail.id)
        this.orderDetail = res.data;
      }
    },


    //修改用户标识号
    async updateFirstChargePrice() {
      const tag = await this.$confirm('将修改该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({type: 'info', message: '已取消'});
      });
      if (tag) {
        this.$message({type: 'success', message: '提交成功!'});
        const query = {
          firstChargePrice: this.orderDetail.firstChargePrice,
          id: this.orderDetail.id
        }
        await updateFirstChargePrice(query);
        const res = await getOrderDetailById(this.orderDetail.id)
        this.orderDetail = res.data;
      }
    },
    gaiJia() {
      if (this.orderDetail.settlementPrice == null && null == this.orderDetail.uploadfloorprice && null == this.orderDetail.orderPrice) {
        this.$modal.msgError("请至少填入一个需要修改的价格!")
        return;
      }
      this.$confirm('你确定要修改价格?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getOrderDetailById(this.orderDetail.id).then(res => {
          const oldData = res.data;
          let settlementPriceTag = false;
          let uploadFloorPriceTag = false;
          let orderPriceTag = false;
          if (oldData.settlementPrice != this.orderDetail.settlementPrice) {
            settlementPriceTag = true;
          }
          if (oldData.uploadFloorPrice != this.orderDetail.uploadFloorPrice) {
            uploadFloorPriceTag = true;
          }
          if (oldData.orderPrice != this.orderDetail.orderPrice) {
            orderPriceTag = true;
          }
          if (settlementPriceTag == false && uploadFloorPriceTag == false && orderPriceTag == false) {
            this.$modal.msgError("你未修改任何价格!")
            return
          }
          const query = {
            id: this.orderDetail.id
          }
          if (settlementPriceTag) {
            query.settlementprice = this.orderDetail.settlementPrice
          }
          if (uploadFloorPriceTag) {
            query.uploadfloorprice = this.orderDetail.uploadFloorPrice
          }
          if (orderPriceTag) {
            query.orderprice = this.orderDetail.orderPrice
          }
          // console.log(query)
          updateGaiJia(query).then(res => {
            getOrderDetailById(this.orderDetail.id).then(res => {
              this.orderDetail = res.data;
            })
          })
          this.$message({type: 'success', message: '提交成功!'});
        })
      }).catch((error) => {
        this.$message({type: 'info', message: '已取消'});
      });
    },

    formatTime(row) {
      // 使用 moment.js 格式化时间戳
      return moment(row * 1000).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  data() {
    var validateTelNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'));
      } else if (!/^1[3-9]\d{9}$/.test(value)) {
        callback(new Error('请输入正确的11位手机号码'));
      } else {
        callback();
      }
    };

    return {
      labelPosition: 'left',
      form_businessSuccess: {
        commissionpriceType: null,
        commissionprice: null,
        businessId: null,
        commissionpriceArr: null,
        content: null,
        liHong: null,
        zhouJian: null,
        fuQuan: null,
      },
      form_businessSuccessVisible: false,
      receiveOrderUserList: [],
      telIsNullTag: false,
      segmentList: [],
      orderFollowTimeList: [],
      haoMaGuiGeStr: '',
      form_userListGroupBy16: {
        doudianOrderManageAuthorId: null
      },
      from_telNumber: {
        telNumber: null,
      },
      form_receive: {
        receiveOrderUserId: null,
        content: ''
      },
      form: {
        supplierId: null,
      },
      supplierList: [],
      sysUserList: [],
      sysUserListByGroup16: [],
      orderDetail: {
        supplierId: null,
        settlementPrice: null,
        uploadFloorPrice: null,
        orderPrice: null
      },
      form_telNumberVisible: false,
      dialogFormVisible: false,
      form_receiveVisible: false,
      form_sysUserListByGroupId16Visible: false,
      orderFollowVisible: false,
      form_receive_rules: {
        receiveOrderUserId: [{required: true, message: '跟单人必选!', trigger: 'blur'}],
        content: [{required: true, message: '备注必填!', trigger: 'blur'},]
      },
      telNumberRules: {
        telNumber: [
          {
            validator: validateTelNumber, trigger: 'blur'
          }
        ]
      }
    }
  }

}

</script>

<style scoped lang="scss">
.spanText {
  color: #676a6c;
  font-size: 14px;
  margin-right: 22px;
}

.spanTextEnd {
  color: #676a6c;
  font-size: 14px;
  margin-right: 6px;
}

.daKuang {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 */
  border-radius: 8px; /* 可选：为卡片添加圆角 */
  background-color: #fff; /* 可选：设置背景颜色 */
  padding: 2px; /* 可选：设置内边距 */
  width: 96%;
  margin-left: 20px;
  margin-bottom: 40px;
}


.fixed-bottom {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 紧贴底部 */
  left: 0; /* 从左侧开始 */
  width: 100%; /* 铺满宽度 */
  padding: 10px; /* 内边距 */
  background-color: #f0f0f0; /* 背景色 */
  text-align: center; /* 文字居中 */
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 顶部阴影 */
  z-index: 1000; /* 确保在最上层 */
}


//复制图标功能
/* 默认隐藏（双重保障） */
.copy-cell .copy-icon {
  display: none !important;
  //margin-left: 8px;
  cursor: pointer;
}

//复制图标功能
/* 悬停时显示 */
.copy-cell:hover .copy-icon {
  display: inline-block !important;
}

//复制图标功能
/* 其他图标不受影响 */
.other-icon {
  margin-left: 20px;
  color: #409EFF;
  cursor: pointer;
}
</style>
